<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单中心</title>
    <link rel="icon" href="http://wb.boqibao.com/favicon2.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>

    <!-- 引入Element-UI样式 -->
    <link rel="stylesheet" href="plugins/element/index.css">
    <link rel="stylesheet" href="plugins/element/icon.css"/>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="script/main.js"></script>

    <!-- 引入Element-UI组件库 -->
    <script src="plugins/element/index.js"></script>

</head>
<body>
<div id="order">

    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
                <span>
                     <a href="" class="top-l" id="myBtn1" @click="recharge">充值联系方式</a>|
                </span>
                <span>
<!--                    <a href="#" id="b-login" class="b-login">登陆</a>-->
                </span>
                <span id="loginAfter" style="display: none;">
                    欢迎您：{{username}}！ |
                    <a href="#" id="b-logout" @click="loginOut">登出</a>
                    <!--                    <a href="/user_client/orderInfo.html">购物车<span id="carCountSpan" class="number"-->
                    <!--                                                            style="margin-left: 10px;">({{carCount}})</span></a>-->
                </span>
            </div>
            <!--            <div class="top-l">全国统一客服热线：XXX</div>-->
            <div class="clear_fix"></div>
        </div>
    </div>

    <!-- 顶部标题 -->
    <div class="bgf5 clearfix">
        <div class="top-user">
            <div class="inner">
                <a class="logo" href="index.html"><img src="images/logo.png.jpg" style="width: 145px; height: 98px"
                                                       alt="首页" class="cover"></a>
                <div class="title">订单中心</div>
            </div>
        </div>
    </div>
    <div class="content clearfix bgf5">
        <section class="user-center inner clearfix">
            <div class="pull-left bgf">
                <a href="#" class="title">欢迎您</a>
                <dl class="user-center__nav">
                    <dt>帐户信息</dt>
                    <a href="#">
                        <dd>基础信息：</dd>
                    </a>
                    <a href="#">
                        <dd>用户名：{{this.user.username}}</dd>
                    </a>
                    <a href="#">
                        <dd>邮箱：{{this.user.email}}</dd>
                    </a>
                    <a href="#">
                        <dd>电话：{{this.user.phone}}</dd>
                    </a>
                    <a href="#">
                        <dd>是否可用：{{this.user.disable}}</dd>
                    </a>
                    <a href="#">
                        <dd>余额：{{this.user.balance}}</dd>
                    </a>
                </dl>
                <dl class="user-center__nav">
                    <dt>订单中心</dt>
                    <a href="order.html">
                        <dd class="active">我的订单</dd>
                    </a>
                    <a href="bill.html">
                        <dd>订单明细</dd>
                    </a>
                    <a href="goods.html">
                        <dd>商品列表</dd>
                    </a>
                    <a href="http://47.242.159.222:8082/app/download">
                        <dd>下载App</dd>
                    </a>
                    <a href="index.html">
                        <dd>首页</dd>
                    </a>
                </dl>
            </div>

            <div class="d-flex justify-content-start">
                <div class="user-content__box clearfix bgf">
                    <div class="title">订单中心-我的订单</div>
                    <div class="order-list__box bgf">
                        <div class="order-panel">
                            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                                <el-form :inline="true" :model="query">
                                    <el-form-item>
                                        <el-input v-model="query.keyword" placeholder="订单号" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" v-on:click="search">查询</el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="query.url" placeholder="URL" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" v-on:click="searchByUrl">链接查询</el-button>
                                    </el-form-item>
                                    <el-select v-model="query.otype" clearable placeholder="订单状态 " @change="search">
                                        <el-option
                                                v-for="item in Otypes"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            {{ item.label }}
                                        </el-option>
                                    </el-select>
                                </el-form>
                            </el-col>
                            <div class="tab-content">
                                <ul class="orderList">
                                    <el-table :data="pageInfo.rows" style="width: 100%" border :key="">
                                        <el-table-column prop="oId" label="订单号" fixed width="110">
                                        </el-table-column>
                                        <el-table-column prop="url" label="微博链接" fixed width="120">
                                        </el-table-column>
                                        <el-table-column prop="goods" label="商品类型" fixed width="60">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.goods.type == 1">关注</span>
                                                <span v-if="scope.row.goods.type == 2">转发</span>
                                                <span v-if="scope.row.goods.type == 3">评论</span>
                                                <span v-if="scope.row.goods.type == 4">点赞</span>
                                                <span v-if="scope.row.goods.type == 5">阅读</span>
                                                <span v-if="scope.row.goods.type == 6">视频播放</span>
                                                <span v-if="scope.row.goods.type == 7">真人转评赞</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==2 ">转发</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==3 ">评论</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==4 ">点赞</span>
                                                <span v-if="scope.row.goods.type == 9">评中评</span>
                                                <span v-if="scope.row.goods.type == 10">评论赞</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="goods" label="初始数据" width="90" fixed>
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.goods.type == 1">{{scope.row.sFollow}}</span>
                                                <span v-if="scope.row.goods.type == 2">{{scope.row.sForward}}</span>
                                                <span v-if="scope.row.goods.type == 3">{{scope.row.sComment}}</span>
                                                <span v-if="scope.row.goods.type == 4">{{scope.row.sGood}}</span>
                                                <span v-if="scope.row.goods.type == 5">{{scope.row.sFollow}}</span>
                                                <span v-if="scope.row.goods.type == 6">{{scope.row.sVideo}}</span>
                                                <span v-if="scope.row.goods.type == 7">点赞:{{ scope.row.sGood
                                                    }}，评论:{{ scope.row.sComment }}，转发:{{ scope.row.sForward
                                                    }}</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==2 ">统一转评赞--转发:{{ scope.row.sForward
                                                    }}</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==3 ">统一转评赞--评论:{{ scope.row.sComment
                                                    }}</span>
                                                <span v-if="scope.row.goods.type == 8 && scope.row.sType==4 ">统一转评赞--点赞:{{ scope.row.sGood
                                                    }}</span>
                                                <span v-if="scope.row.goods.type == 9">评中评:{{scope.row.sComment}}</span>
                                                <span v-if="scope.row.goods.type == 10">评论赞:{{scope.row.sGood}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="Completion" label="完成数量" fixed width="60">
                                        </el-table-column>
                                        <el-table-column prop="surplus" label="剩余量" fixed width="70">
                                        </el-table-column>
                                        <el-table-column prop="oType" label="订单状态" fixed width="70">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.oType == 0" style="color: blue">待处理</span>
                                                <span v-if="scope.row.oType == 1">待接单</span>
                                                <span v-if="scope.row.oType == 2">进行中</span>
                                                <span v-if="scope.row.oType == 3">已完成</span>
                                                <span v-if="scope.row.oType == 4">订单取消</span>
                                                <span v-if="scope.row.oType == 5">退款中</span>
                                                <span v-if="scope.row.oType == 6" style="color: red">异常订单</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="finalPrice" label="订单总价" fixed width="50">
                                        </el-table-column>
                                        <el-table-column prop="createTime" label="下单时间" fixed width="100">
                                        </el-table-column>
                                        <el-table-column label="操作" min-width="100" fixed="right">
                                            <template scope="scope">
                                                <el-button type="primary" size="small" v-if="scope.row.oType==1"
                                                           @click="refund(scope.row)">退款
                                                </el-button>
                                                <el-button type="primary" size="small"
                                                           @click="byonce(scope.row)">重复下单
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                    <el-dialog title="重复购买" :visible.sync="byonceVisible"
                                               :close-on-click-modal="false" width="1500">
                                        <div v-loading.fullscreen.lock="fullscreenLoading">
                                            <p>
                                                <strong>商品名称:</strong> {{ goodsinfo.name }}
                                                <strong v-if="goodsinfo.type !== 8">商品价格:{{ goodsinfo.price
                                                    }}</strong>
                                            <p><strong v-if="goodsinfo.type === 8">商品价格(转发):{{ remarks.sFprice
                                                }}</strong>
                                            </p>
                                            <p><strong v-if="goodsinfo.type === 8">商品价格(评论):{{ remarks.sCprice
                                                }}</strong>
                                            </p>
                                            <p>
                                                <strong v-if="goodsinfo.type === 8">商品价格(点赞):{{ remarks.sGprice
                                                    }}</strong>
                                            </p>
                                            </p>
                                            <p><strong>商品状态:</strong>
                                                <span v-if="goodsinfo.state === 0">上架</span>
                                                <span v-if="goodsinfo.state === 1">下架</span>
                                            </p>
                                            <p><strong>商品类型:</strong>
                                                <span v-if="goodsinfo.type === 1">关注</span>
                                                <span v-if="goodsinfo.type === 2">转发</span>
                                                <span v-if="goodsinfo.type === 3">评论</span>
                                                <span v-if="goodsinfo.type === 4">点赞</span>
                                                <span v-if="goodsinfo.type === 5">阅读</span>
                                                <span v-if="goodsinfo.type === 6">视频播放</span>
                                                <span v-if="goodsinfo.type === 7">真人转评赞</span>
                                                <span v-if="goodsinfo.type === 8">统一转评赞</span>
                                                <span v-if="goodsinfo.type === 9">评中评</span>
                                                <span v-if="goodsinfo.type === 10">评论赞</span>
                                            </p>
                                            <p>
                                                <span v-if="goodsinfo.type !== 8">
                                                    <strong>最大数量:</strong> {{ goodsinfo.maxqty}}
                                                    <strong>最小数量:</strong> {{ goodsinfo.minqty }}
                                                </span>
                                                <!-- 转发-->
                                                <span v-if="goodsinfo.type === 8&& row.sType==2">
                                                    <strong>最大数量:</strong> {{ remarks.sFmaxqty}}
                                                    <strong>最小数量:</strong> {{ remarks.sFminqty}}
                                                </span>
                                                <!-- 评论-->
                                                <span v-if="goodsinfo.type === 8&& row.sType==3">
                                                     <strong>最大数量:</strong> {{ remarks.sCmaxqty}}
                                                    <strong>最小数量:</strong> {{ remarks.sCminqty}}
                                                </span>
                                                <!-- 点赞-->
                                                <span v-if="goodsinfo.type === 8&& row.sType==4">
                                                     <strong>最大数量:</strong> {{ remarks.sGmaxqty}}
                                                    <strong>最小数量:</strong> {{ remarks.sGminqty}}
                                                </span>
                                            </p>
                                            <p>
                                                <strong>下单链接:</strong> {{ goodsinfo.url }}
                                            </p>
                                            <p v-if="goodsinfo.type < 8">
                                                <el-input-number size="medium" v-model="inputData.count"
                                                                 :step='1'
                                                                 :min="goodsinfo.minqty"
                                                                 :max="goodsinfo.maxqty"></el-input-number>
                                            </p>

                                            <div v-if="goodsinfo.type === 8">
                                                <p>
                                                    <strong>转发数量:</strong>
                                                    <el-input-number size="medium" v-model="uniFinalcount.countf"
                                                                     :step='1'
                                                                     :min="remarks.sGminqty"
                                                                     :max="remarks.sGmaxqty"></el-input-number>
                                                </p>
                                                <p>
                                                    <strong>评论数量:</strong>
                                                    <el-input-number size="medium" v-model="uniFinalcount.countc"
                                                                     :step='1'
                                                                     :min="remarks.sGminqty"
                                                                     :max="remarks.sGmaxqty"></el-input-number>
                                                </p>
                                                <p>
                                                    <strong>点赞数量:</strong>
                                                    <el-input-number size="medium" v-model="uniFinalcount.countg"
                                                                     :step='1'
                                                                     :min="remarks.sGminqty"
                                                                     :max="remarks.sGmaxqty"></el-input-number>
                                                </p>
                                            </div>


                                            <p v-if="goodsinfo.type === 9">
                                                <label>下单数量:</label>
                                                <el-input-number size="medium" v-model="inputData.count"
                                                                 :step='1'
                                                                 :min="goodsinfo.minqty"
                                                                 :max="goodsinfo.maxqty"></el-input-number>

                                                <el-input style="width: 600px;margin-top: 20px" type="url"
                                                          placeholder="请输入UID"
                                                          v-model="inputData.refundNumber">
                                                </el-input>
                                            </p>

                                            <p v-if="goodsinfo.type === 10">
                                                <label>下单数量:</label>
                                                <el-input-number size="medium" v-model="inputData.count"
                                                                 :step='1'
                                                                 :min="goodsinfo.minqty"
                                                                 :max="goodsinfo.maxqty"></el-input-number>

                                                <el-input style="width: 600px;margin-top: 20px" type="url"
                                                          placeholder="请输入TaskID"
                                                          v-model="inputData.refundNumber">
                                                </el-input>
                                            </p>
                                        </div>
                                        <div slot="footer" class="dialog-footer">
                                            <el-button type="primary" @click="addOrder">确定下单</el-button>
                                            <el-button @click.native="byonceVisible = false">取消</el-button>
                                            <!--            <el-button type="primary" @click.native="save" :loading="addLoading">提交</el-button>-->
                                        </div>
                                    </el-dialog>
                                </ul>

                                <div class="block">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="query.currentPage"
                                            :page-sizes="[10, 20, 30, 50]"
                                            :page-size="query.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="pageInfo.total" style="float:right;">
                                    </el-pagination>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
    <div class="copyright">
        <div class="cent"></div>
    </div>
</div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#order",
        data: {
            byonceVisible: false,
            goodsinfo: {
                name: '',
                price: "",
                maxqty: "",
                minqty: "",
                state: "",
                type: "",
                url: "",
            },
            remarks: {
                sFprice: 0,
                sFminqty: 0,
                sFmaxqty: 0,
                sCprice: 0,
                sCminqty: 0,
                sCmaxqty: 0,
                sGprice: 0,
                sGminqty: 0,
                sGmaxqty: 0
            },
            row: {},
            RegisterDTO: {
                username: "",
                password: "",
                confirmPassword: "",
                phone: "",
                email: "",
                // imageCode: "",
                // smsCode: "" // 手机验证码
            },

            //用户名登录data
            loginDto: {
                username: '',
                password: ''
            },

            //用来登录后展示用户名
            username: "",
            showButton: false,
            user: {
                id: '',
                username: '',
                email: '',
                phone: '',
                headImg: ''
            },
            pageInfo: {
                rows: [],
                total: 0
            },
            query: {
                currentPage: 1,
                pageSize: 10,
                keyword: "",
                uid: "",
                url: "",
                otype: '',


            },
            searchByUrlDto: {
                uid: "",
                url: "",
            },
            Otypes: [{
                value: '1',
                label: '待接单'
            }, {
                value: '2',
                label: '进行中'
            }, {
                value: '3',
                label: '已完成'
            }, {
                value: '4',
                label: '订单取消'
            },
                {
                    value: '5',
                    label: '退款中'
                },
                {
                    value: '6',
                    label: '异常订单'
                }],
            inputData: {
                count: 0,
                refundNumber: "",
            },
            fullscreenLoading: false,//设置等待遮罩
            uniFinalcount: {
                countf: 0,
                countc: 0,
                countg: 0,
            }

        },

        methods: {
            //获取订单信息

            addOrder() {

                if (this.goodsinfo.type == 9) {
                    if (!this.inputData.refundNumber) {
                        this.$message({
                            message: "请完善内容",
                            type: 'warning'
                        });
                        return null;
                    }
                }

                var loginUser = localStorage.getItem("loginUser");
                if (loginUser) {
                    loginUser = JSON.parse(loginUser);
                    this.fullscreenLoading = true;


                    var data = {
                        sId: this.goodsinfo.id,
                        ShopId: this.goodsinfo.shopId,
                        uId: loginUser.id,
                        url: this.row.url,
                        finalPrice:  this.goodsinfo.price,
                        count: this.inputData.count,
                        refundNumber: this.inputData.refundNumber != null ? this.inputData.refundNumber : ''
                    };



                    if (this.goodsinfo.type != 8) {
                        this.$http.post("/order/addOrder", data)
                            .then(result => {
                                result = result.data;
                                //设置回收等待遮罩
                                this.fullscreenLoading = false;

                                if (result.success) {
                                    //设置回收等待遮罩

                                    this.byonceVisible = false

                                    this.getOrder()

                                    this.$message({
                                        message: result.message,
                                        type: 'success'
                                    });

                                } else {

                                    this.$message({
                                        message: result.message,
                                        type: 'warning'
                                    });

                                }
                            }).catch(result => {
                            console.log(result)
                            //设置回收等待遮罩
                            this.fullscreenLoading = false;

                            this.$message({
                                message: "系统异常",
                                type: 'warning'
                            });

                        })
                    } else {


                        let flprice = {
                            pricef:this.remarks.sFprice,
                            pricec:this.remarks.sCprice,
                            priceg:this.remarks.sGprice
                        };

                        var data = {
                            sId: this.goodsinfo.id,
                            ShopId: this.goodsinfo.shopId,
                            uId: loginUser.id,
                            url: this.row.url,
                            price: JSON.stringify(flprice),
                            count: JSON.stringify(this.uniFinalcount),
                        };

                        this.$http.post("/order/addorderByunified", data)
                            .then(result => {
                                result = result.data;
                                //设置回收等待遮罩
                                this.fullscreenLoading = false;

                                if (result.success) {

                                    this.byonceVisible = false
                                    this.getOrder()

                                    this.$message({
                                        message: result.message,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: result.message,
                                        type: 'warning'
                                    });

                                }
                            }).catch(result => {
                            //设置回收等待遮罩
                            this.fullscreenLoading = false;

                            this.$message({
                                message: "系统异常",
                                type: 'warning'
                            });
                        })
                    }
                }

            },

            convertStringsToNumbers(obj) {
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (typeof obj[key] === 'string' && !isNaN(obj[key])) {
                            // 如果值是字符串并且可以转换为数字，则进行转换
                            obj[key] = parseFloat(obj[key]);
                        } else if (typeof obj[key] === 'object') {
                            // 如果值是对象，则递归调用自身
                            this.convertStringsToNumbers(obj[key]);
                        }
                    }
                }
            },
            getOrder() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.query.uid = logininfoId.id;
                // 通过axios调用后端分页接口
                this.$http.post("/order", this.query)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            // 要展示table的数据,渲染分页条
                            this.pageInfo = result.resultObj;
                            // console.log("========")
                            // console.log(this.pageInfo.rows)
                        }
                    })
            },
            search() {
                this.query.currentPage = 1;
                this.getOrder()
            },
            searchByUrl() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.searchByUrlDto.uid = logininfoId.id;
                // 通过axios调用后端分页接口
                this.getOrder();
            },

            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getOrder()
            },

            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getOrder()
            },
            recharge() {
                alert("请联系QQ:3688032004;QQ:2717196271")
            },
            byonce(row) {
                this.goodsinfo.url = row.url
                this.$confirm('确认再次下单?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.get("/goods/" + row.sId)
                        .then(result => {
                            result = result.data;
                            if (result.success) {
                                // 操作成功:要关闭加载框 刷新当前数据  提示删除成功
                                this.listLoading = false;
                                this.byonceVisible = true;
                                this.goodsinfo = result.resultObj;
                                this.goodsinfo.url = row.url;
                                this.remarks = JSON.parse(result.resultObj.remarks);
                                this.row = row;
                                this.convertStringsToNumbers(this.remarks)
                                if (this.goodsinfo.type != 8) {
                                    this.remarks.count = this.goodsinfo.minqty;
                                } else {
                                    this.uniFinalData.countf = this.remarks.sFminqty;
                                    this.uniFinalcount.countc = this.remarks.sCminqty;
                                    this.uniFinalcount.countg = this.remarks.sGminqty;
                                }
                                this.inputData.refundNumber = "";
                                // this.$message({message: '操作成功!', type: 'success'});
                            } else {
                                this.$message({message: result.message, type: 'error'});
                            }
                        })
                }).catch(() => {
                    this.$message({message: '已取消重复下单操作', type: 'info'});
                });
            },

            refund(row) {
                this.$confirm('确认退款?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.get("/order/refund/" + row.oId)
                        .then(result => {
                            result = result.data;
                            if (result.success) {
                                // 操作成功:要关闭加载框 刷新当前数据  提示删除成功
                                this.listLoading = false;
                                // 从第一页开始重新进行查询
                                this.search()
                                this.$message({message: '操作成功!', type: 'success'});
                            } else {
                                this.$message({message: result.message, type: 'error'});
                            }
                        })
                }).catch(() => {
                    this.$message({message: '已取消退款操作', type: 'info'});
                });
            },

            //修改密码提交
            changePasswordCommit() {
                this.retrievePassword.username = this.retrievePassword.phone;
                if (!this.retrievePassword.phone) {
                    alert("手机号码不能为空");
                    return;
                }
                if (!this.retrievePassword.smsCode) {
                    alert("手机验证码不能为空");
                    return;
                }
                //比较两次密码是否一致
                if (this.retrievePassword.password != this.retrievePassword.confirmPassword) {
                    alert("两次密码不一致，请重新输入");
                    return;
                }
                this.$http.post("/login/changePassword", this.retrievePassword)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("修改成功");
                            //关闭弹框
                            $("#popBox").fadeOut();
                        } else {
                            alert(result.message);
                        }
                    }).catch(result => {

                })

            },

            //修改密码发送手机验证码
            sendPhoneMessageChangePassword(event) {
                //参数非空
                if (!this.retrievePassword.phone) {
                    alert("手机号不能为空");
                    return;
                }

                //获取按钮，禁用按钮
                var sendBtn = $(event.target);
                sendBtn.attr("disabled", true);

                //发送ajax请求
                this.$http.post("/verification/sms/changePassword", this.retrievePassword)
                    .then(result => {
                        var ajaxResult = result.data;
                        if (ajaxResult.success) {
                            alert("手机验证码已经发送到您的手机，请在5分钟内使用");
                            //4.1.发送成：倒计时
                            var time = 60;

                            var interval = window.setInterval(function () {
                                //每一条倒计时减一
                                time = time - 1;

                                //把倒计时时间搞到按钮上
                                sendBtn.val(time + "秒后重发");

                                //4.2.倒计时完成恢复按钮
                                if (time <= 0) {
                                    sendBtn.val("重新发送");
                                    sendBtn.attr("disabled", false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            }, 1000);
                        } else {
                            //4.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled", false);
                            alert("发送失败:" + ajaxResult.message);
                        }
                    })
            },

            //手机号登录
            phoneLogin() {
                this.phoneLoginIn.username = this.phoneLoginIn.phone;
                //参数非空
                if (!this.phoneLoginIn.username) {
                    alert("手机号不能为空");
                    return;
                }
                if (!this.phoneLoginIn.smsCode) {
                    alert("手机号不能为空");
                    return;
                }
                this.$http.post("/login/phone", this.phoneLoginIn)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("登录成功，欢迎使用");
                            //将信息存到localStorage
                            localStorage.setItem("token", result.resultObj.token);
                            localStorage.setItem("loginUser", JSON.stringify(result.resultObj.loginUser));
                            //登录后需要展示用户的用户名
                            this.username = result.resultObj.loginUser.username;
                            //展示登出按钮
                            $("#loginBefore").hide();
                            $("#loginAfter").show();
                            //关闭弹框
                            $("#popBox").fadeOut();
                        } else {

                        }
                    }).catch(result => {

                })
            },

            //手机账号登录，发送手机验证码
            sendPhoneMessage(event) {
                //参数非空
                if (!this.phoneLoginIn.phone) {
                    alert("手机号不能为空");
                    return;
                }
                //获取按钮，禁用按钮
                var sendBtn = $(event.target);
                sendBtn.attr("disabled", true);

                //4.发送ajax请求
                this.$http.post("/verification/sms/phone", this.phoneLoginIn)
                    .then(result => {
                        var ajaxResult = result.data;
                        if (ajaxResult.success) {
                            alert("手机验证码已经发送到您的手机，请在5分钟内使用");
                            //4.1.发送成：倒计时
                            var time = 60;

                            var interval = window.setInterval(function () {
                                //每一条倒计时减一
                                time = time - 1;

                                //把倒计时时间搞到按钮上
                                sendBtn.val(time + "秒后重发");

                                //4.2.倒计时完成恢复按钮
                                if (time <= 0) {
                                    sendBtn.val("重新发送");
                                    sendBtn.attr("disabled", false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            }, 1000);
                        } else {
                            //4.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled", false);
                            alert("发送失败:" + ajaxResult.message);
                        }
                    })
            },

            //用户登出
            loginOut() {
                this.$http.post("/user/logout")
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("登出成功");
                            localStorage.removeItem("token");
                            localStorage.removeItem("loginUser");
                            //展示登路按钮
                            $("#loginBefore").show();
                            $("#loginAfter").hide();
                            location.href = "/index.html";
                        }
                    }).catch(result => {

                })
            },

            //用户登录
            loginIn() {
                //参数非空校验
                if (!this.loginDto.username) {
                    alert("用户民不能为空");
                    return;
                }
                if (!this.loginDto.password) {
                    alert("密码不能为空");
                    return;
                }
                this.$http.post("/user/login", this.loginDto)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("登录成功，欢迎使用");
                            //将信息存到localStorage
                            localStorage.setItem("token", result.resultObj.token);
                            localStorage.setItem("loginUser", JSON.stringify(result.resultObj.loginUser));
                            //登录后需要展示用户的用户名
                            this.username = result.resultObj.loginUser.username;
                            //展示登出按钮
                            $("#loginBefore").hide();
                            $("#loginAfter").show();
                            //关闭弹框
                            $("#popBox").fadeOut();
                        } else {

                        }
                    }).catch(result => {

                })
            },

            //创建uuid随机字符串
            createUuid() {
                var s = [];
                var hexDigits = "0123456789abcdefghi";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },

            //获取图片验证码
            getImg() {
                let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
                if (!imageCodeKey || imageCodeKey === '') {
                    imageCodeKey = this.createUuid(); // 重新生成uuid
                    sessionStorage.setItem("registerImageCodeKey", imageCodeKey);
                }
                // 调用后端接口获取图片验证码
                this.$http.get("/verification/image/" + imageCodeKey)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            this.img = this.imgCodePrefix + result.resultObj;
                        } else {

                        }
                    }).catch(result => {

                })
            },

            //发送手机验证码
            RegisterDTOCode(event) {
                //1.判断手机号不为空
                if (!this.RegisterDTO.phone) {
                    alert("手机号不能为空");
                    return;
                }
                //2.判断图片验证码不为空
                if (!this.RegisterDTO.imageCode) {
                    alert("图片验证码不能为空");
                    return;
                }

                //3.获取按钮，禁用按钮
                var sendBtn = $(event.target);
                sendBtn.attr("disabled", true);

                //获取uuid
                this.RegisterDTO.imageCodeKey = sessionStorage.getItem("registerImageCodeKey");

                //4.发送ajax请求
                this.$http.post("/verification/sms/register", this.RegisterDTO)
                    .then(result => {
                        var ajaxResult = result.data;
                        if (ajaxResult.success) {
                            alert("手机验证码已经发送到您的手机，请在5分钟内使用");
                            //4.1.发送成：倒计时
                            var time = 60;

                            var interval = window.setInterval(function () {
                                //每一条倒计时减一
                                time = time - 1;

                                //把倒计时时间搞到按钮上
                                sendBtn.val(time + "秒后重发");

                                //4.2.倒计时完成恢复按钮
                                if (time <= 0) {
                                    sendBtn.val("重新发送");
                                    sendBtn.attr("disabled", false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            }, 1000);
                        } else {
                            //4.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled", false);
                            alert("发送失败:" + ajaxResult.message);
                        }
                    })
            },

            //注册方法
            registerSave() {
                //判断手机号不能为空
                if (!this.RegisterDTO.username) {
                    alert("用户名不能为空");
                    return;
                }
                //比较两次密码是否一致
                if (this.RegisterDTO.password != this.RegisterDTO.confirmPassword) {
                    alert("两次密码不一致，请重新输入");
                    return;
                }

                //调用后端注册接口
                this.$http.post("/user/register", this.RegisterDTO)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("恭喜你,注册成功!");
                            $('#popBox').fadeOut(); // 关闭注册弹框
                        } else {
                            alert(result.message);
                        }
                    })
            },


            // 获取当前用户的信息
            getUserInfo() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.$http.get("/user/" + logininfoId.id)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            // console.log("输出的用户信息")
                            // console.log(result.resultObj)

                            this.user = result.resultObj
                            // console.log("111111111111")
                            // console.log(this.user)
                            // console.log("============")
                        } else {

                        }
                    }).catch(result => {

                })
            },


        },

        mounted() {

            //如果localStorage已经有值，此时应该是登录状态
            var loginUser = localStorage.getItem("loginUser");
            console.log(loginUser)
            if (loginUser) {
                loginUser = JSON.parse(loginUser);
                this.username = loginUser.username;

                //展示登出按钮
                $("#loginBefore").hide();
                $("#loginAfter").show();
            }

            //获取用户信息
            this.getUserInfo();
            console.log("---------------------")
            console.log(this.user.id)
            console.log("---------------------")

            this.getOrder()
        }

    })
</script>
<style>

    .order-panel {
        display: flow-root;
    }

    /* 在小屏幕上设置账户信息和订单中心为块级元素，使其在一行显示 */
    @media (max-width: 767px) {
        .user-center__nav {
            display: block ruby;
        }

        .copyright .cent {
            width: auto;
        }

        .bgf {
            background: #fff;
        }

        .user-center__nav dt {
            background-color: #fff;
        }

        .bgf5 {
            background-color: #fff;
        }

        .copyright .cent {
            color: #000;
        }

        .copyright {
            background-color: #fff;
        }

        .egc-top .nav-cent {
            background-color: #fff;
        }

        html {
            overflow-y: hidden;
        }

        .order-panel {
            display: inherit;
        }
    }
</style>
</body>
</html>
